<template>
  <div class="container">
    <el-card>
      <div>
        <avue-crud
          :option="option"
          :table-loading="loading"
          :data="data"
          :page="page"
          v-model="form"
          ref="crud"
          @row-update="rowUpdate"
          @row-save="rowSave"
          @row-del="rowDel"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template slot="menuLeft">
            <el-row :gutter="10">
              <el-col :span="8">
                <div class="lab">关键词 :</div>
                <div class="ipt" style="margin-left:50px;">
                  <el-input size="mini" v-model="search.roomName" placeholder="请输入小区/房号/租客名"></el-input>
                </div>
              </el-col>

              <el-col :span="9">
                <div class="lab">催缴时间 :</div>
                <div class="ipt">
                  <el-date-picker
                    size="mini"
                    v-model="search.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </div>
              </el-col>

              <el-col :span="7">
                <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
                <el-button type="primary" size="mini" @click="clearSearch">清空</el-button>
                <el-button type="primary" size="mini" @click="getExcel">导出</el-button>
              </el-col>
            </el-row>
          </template>
        </avue-crud>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getList } from "@/api/contract/callCost";
export default {
  name: "callCost",
  data() {
    return {
      search: {
        roomName: "",
        time: "",
      },
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      data: [],
      option: {
        selection: true,
        align: "center",
        addBtn: false,
        menuAlign: "center",
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: [
          {
            label: "房间信息",
            prop: "roomName",
          },
          {
            label: "租客名",
            prop: "memberName",
          },
          {
            label: "手机号",
            prop: "mobile",
          },
          {
            label: "支付金额",
            prop: "amount",
          },
          {
            label: "待支付金额",
            prop: "unpaid",
          },
          {
            label: "已支付金额",
            prop: "paid",
          },
          {
            label: "支付用途",
            prop: "paymentTarget",
            dicData: [
              {
                label: "支付电费",
                value: 1,
              },
              {
                label: "支付水费",
                value: 2,
              },
              {
                label: "支付物业费",
                value: 3,
              },
            ],
          },
          {
            label: "卡余额",
            prop: "balance",
          },
          {
            label: "催缴次数",
            prop: "urgeCnt",
          },
          {
            label: "催缴时间",
            prop: "urgeTime"
          },
        ],
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {
    clearSearch() {
      this.search = {
        roomName: "",
        time: "",
      };
      this.onLoad(this.page);
    },
    searchList() {
      this.onLoad(this.page);
    },
    getExcel() {
      this.$refs.crud.rowExcel();
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
      this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
      this.$message.success("页码" + val);
    },
    onLoad(page, params = {}) {
      const { search } = this;
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query, {
          roomName: search.roomName,
          startDate: search.time[0],
          endDate: search.time[1],
        })
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.$refs.crud && this.$refs.crud.selectClear();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.lab {
  float: left;
  font-size: 12px;
  margin-top: 5px;
}

.ipt {
  margin-left: 60px;
}
</style>
